@media (min-width: 375px) {
  /** Minimum supported width. Keep code so breakpoint shows in devtools. **/
}

.theme.__vbk__ {
  /**-------------------------------------------------------------------------------------------
   * Breakpoints
   *-------------------------------------------------------------------------------------------*/

  /* Only used for reference, changing values does nothing. Minimum is 375px. */
  --vbk--bp-xs: 420px;
  --vbk--bp-sm: 576px;
  --vbk--bp-md: 768px;
  --vbk--bp-lg: 992px;
  --vbk--bp-xl: 1200px;

  /**-------------------------------------------------------------------------------------------
   * Typography
   *-------------------------------------------------------------------------------------------*/

  --vbk--fony-family: ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

  --vbk--font-family-mono: source-code-pro, Menlo, Monaco, Consolas,
    'Courier New', monospace;

  /**-------------------------------------------------------------------------------------------
   * Colors
   *-------------------------------------------------------------------------------------------*/

  --vbk--color-primary: #610fe6;
  --vbk--color-primary-rgb: 97, 15, 230;

  /** Thanks GitLab! **/
  --vbk--color-blue: #007bff;
  --vbk--color-indigo: #6610f2;
  --vbk--color-purple: #6d49cb;
  --vbk--color-pink: #e83e8c;
  --vbk--color-red: #dc3545;
  --vbk--color-orange: #fd7e14;
  --vbk--color-yellow: #ffc107;
  --vbk--color-green: #28a745;
  --vbk--color-teal: #20c997;
  --vbk--color-cyan: #17a2b8;
  --vbk--color-success: #108548;
  --vbk--color-info: #1f75cb;
  --vbk--color-warning: #ffc107;
  --vbk--color-danger: #dd2b0e;

  --vbk--color-black: #000000;
  --vbk--color-white: #ffffff;

  --vbk--color-gray-50: hsl(0, 0%, 97.5%);
  --vbk--color-gray-100: hsl(0, 0%, 95%);
  --vbk--color-gray-200: hsl(0, 0%, 91.5%);
  --vbk--color-gray-300: hsl(0, 0%, 90.5%);
  --vbk--color-gray-400: hsl(0, 0%, 82.5%);
  --vbk--color-gray-500: hsl(0, 0%, 17%);
  --vbk--color-gray-600: hsl(0, 0%, 12.3%);
  --vbk--color-gray-700: hsl(0, 0%, 11.5%);
  --vbk--color-gray-800: hsl(0, 0%, 10.8%);
  --vbk--color-gray-900: hsl(0, 0%, 10.2%);

  --vbk--color-text: var(--vbk--color-gray-500);
  --vbk--color-text-rgb: 0, 0, 0;

  --vbk--color-bg-100: var(--vbk--color-gray-100);
  --vbk--color-bg-200: var(--vbk--color-gray-200);
  --vbk--color-bg-300: var(--vbk--color-gray-300);
  --vbk--color-bg-400: var(--vbk--color-gray-400);

  --vbk--color-divider: var(--vbk--color-gray-100);

  --vbk--color-transition-duration: 100ms;
  --vbk--color-transition-timing: ease-in;
  --vbk--color-transition: color var(--vbk--color-transition-duration)
    var(--vbk--color-transition-timing);

  --vbk--focus-box-shadow: 0 0 0 2.5px rgba(var(--vbk--color-text-rgb));

  /**-------------------------------------------------------------------------------------------
   * Elevation
   *-------------------------------------------------------------------------------------------*/

  /* Thanks https://www.joshwcomeau.com/css/designing-shadows/ */

  --vbk--shadow-color: 0deg 0% 50%;

  --vbk--elevation-small: 0.1px 0.2px 0.2px
      hsl(var(--vbk--shadow-color) / 0.087),
    0.3px 0.5px 0.5px hsl(var(--vbk--shadow-color) / 0.125),
    0.6px 1.2px 1.2px hsl(var(--vbk--shadow-color) / 0.163),
    2px 4px 4px hsl(var(--vbk--shadow-color) / 0.25);

  --vbk--elevation-medium: 0.3px 0.5px 0.5px
      hsl(var(--vbk--shadow-color) / 0.087),
    0.8px 1.5px 1.5px hsl(var(--vbk--shadow-color) / 0.125),
    1.8px 3.6px 3.6px hsl(var(--vbk--shadow-color) / 0.163),
    6px 12px 12px hsl(var(--vbk--shadow-color) / 0.25);

  /**-------------------------------------------------------------------------------------------
   * Global
   *-------------------------------------------------------------------------------------------*/

  --vbk--page-md-bg-color: var(--vbk--color-bg-100);

  /**-------------------------------------------------------------------------------------------
   * Menu
   *-------------------------------------------------------------------------------------------*/

  --vbk--menu-bg-color: var(--vbk--color-bg-100);
  --vbk--menu-border: 0.12rem solid var(--vbk--color-bg-200);
  --vbk--menu-transition: opacity 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);

  --vbk--menu-item-hover-color: var(--vbk--color-text);
  --vbk--menu-item-hover-bg-color: var(--vbk--color-bg-300);

  /**-------------------------------------------------------------------------------------------
   * Toggle
   *-------------------------------------------------------------------------------------------*/

  --vbk--toggle-color: var(--vbk--color-text);
  --vbk--toggle-bg-color: transparent;
  --vbk--toggle-hover-color: unset;
  --vbk--toggle-hover-bg-color: var(--vbk--color-bg-300);

  /**-------------------------------------------------------------------------------------------
   * Scrim
   *-------------------------------------------------------------------------------------------*/

  --vbk--scrim-bg-color: var(--vbk--color-bg-300);
  --vbk--scrim-z-index: calc(var(--vbk--navbar-z-index) + 100);

  /**-------------------------------------------------------------------------------------------
   * Navbar
   *-------------------------------------------------------------------------------------------*/

  --vbk--navbar-height: 4.25rem;
  --vbk--navbar-z-index: 100;
  --vbk--navbar-bg-color: var(--vbk--color-bg-100);

  --vbk--navbar-title-color: var(--vbk--color-text);
  --vbk--navbar-logo-color: var(--vbk--color-primary);
  --vbk--navbar-logo-transition: var(--vbk--color-transition);

  /* Nav Item */
  --vbk--nav-item-color: var(--vbk--color-text);
  --vbk--nav-item-bg-color: var(--vbk--color-bg-100);

  --vbk--nav-item-hover-color: unset;
  --vbk--nav-item-hover-bg-color: transparent;

  /* Nav Link */
  --vbk--nav-link-hover-border: 0.12rem solid var(--vbk--color-text);

  --vbk--nav-link-active-color: var(--vbk--color-text);
  --vbk--nav-link-active-bg-color: transparent;
  --vbk--nav-link-active-border: 0.12rem solid var(--vbk--color-primary);

  /**-------------------------------------------------------------------------------------------
   * Sidebar
   *-------------------------------------------------------------------------------------------*/

  --vbk--sidebar-bg-color: var(--vbk--color-bg-100);

  --vbk--sidebar-min-width: 18.5rem;
  --vbk--sidebar-z-index: calc(var(--vbk--scrim-z-index) + 100);

  --vbk--sidebar-item-color: var(--vbk--color-text);
  --vbk--sidebar-item-bg-color: var(--vbk--sidebar-bg-color);
  --vbk--sidebar-item-padding: 0.5rem 0.75rem;
  --vbk--sidebar-item-font-size: 1rem;
  --vbk--sidebar-item-spacing: 0.2rem;
  --vbk--sidebar-item-font-weight: 400;
  --vbk--sidebar-item-border-radius: 0.12rem;
  --vbk--sidebar-item-line-height: 1.5;
  --vbk--sidebar-item-min-width: 10.5rem;

  --vbk--sidebar-item-active-color: var(--vbk--menu-item-hover-color);
  --vbk--sidebar-item-active-bg-color: var(--vbk--menu-item-hover-bg-color);

  --vbk--sidebar-item-hover-color: var(--vbk--menu-item-hover-color);
  --vbk--sidebar-item-hover-bg-color: var(--vbk--menu-item-hover-bg-color);

  /**-------------------------------------------------------------------------------------------
   * Code
   *-------------------------------------------------------------------------------------------*/

  --vbk--code-color-scheme: dark;
  --vbk--code-line-height: 1.6;
  --vbk--code-font-family: var(--vbk--font-family-mono);
  --vbk--code-font-size: 0.875rem;
  --vbk--code-bg-color: #282c34;
  --vbk--code-hl-bg-color: hsl(220deg, 13%, 25%);
  --vbk--code-hl-ln-height: 1.4;
  --vbk--code-ln-color: #9e9e9e;
  --vbk--code-ln-wrapper-width: 3.5rem;

  /**-------------------------------------------------------------------------------------------
   * Brand Link
   *-------------------------------------------------------------------------------------------*/

  --vbk-brand-link-spacing: 0.25rem;
}

.sidebar.__vbk__ {
  --vbk-brand-link-spacing: 0.15rem;
}
